<template>
  <section class="profile">
      <HeaderTop :title="mytitle"></HeaderTop>
        <section class="profile-number">
          <router-link class="profile-link"  :to="userInfo._id ? '/userinfo' :'/login' ">
               <div class="profile_image">
              <i class="iconfont icon-person"></i>
            </div>
            <div class="user-info">
              <p class="user-info-top"  v-if='!userInfo.phone' >
                 {{userInfo.name || '登录/注册'}}</p>
   <!-- 这个或的表达式比三元次表达式好用，更简单。要么就显示个人的用户名要么就显示没有登录的登录注册。意思为要么就是登录的，要么就是没登录的 -->
              <p>
                <span class="user-icon">
                  <i class="iconfont icon-shouji icon-mobile"></i>
                </span>
                <span class="icon-mobile-number">{{userInfo.phone||'暂无绑定手机号'}}</span>
              </p>
            </div>
            <span class="arrow">
              <i class="iconfont icon-jiantou1"></i>
            </span>
          </router-link>
        </section>

        <section class="profile_info_data border-1px">
          <ul class="info_data_list">
            <a href="javascript:" class="info_data_link">
              <span class="info_data_top"><span>0.00</span>元</span>
              <span class="info_data_bottom">我的余额</span>
            </a>
            <a href="javascript:" class="info_data_link">
              <span class="info_data_top"><span>0</span>个</span>
              <span class="info_data_bottom">我的优惠</span>
            </a>
            <a href="javascript:" class="info_data_link">
              <span class="info_data_top"><span>0</span>分</span>
              <span class="info_data_bottom">我的积分</span>
            </a>
          </ul>
        </section>
        <section class="profile_my_order border-1px">
          <!-- 我的订单 -->
          <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-order-s"></i>
            </span>
            <div class="my_order_div">
              <span>我的订单</span>
              <span class="my_order_icon">
                <i class="iconfont icon-jiantou1"></i>
              </span>
            </div>
          </a>
          <!-- 积分商城 -->
          <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-jifen"></i>
            </span>
            <div class="my_order_div">
              <span>积分商城</span>
              <span class="my_order_icon">
                <i class="iconfont icon-jiantou1"></i>
              </span>
            </div>
          </a>
          <!-- 硅谷外卖会员卡 -->
          <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-vip"></i>
            </span>
            <div class="my_order_div">
              <span>硅谷外卖会员卡</span>
              <span class="my_order_icon">
                <i class="iconfont icon-jiantou1"></i>
              </span>
            </div>
          </a>
        </section>
        <section class="profile_my_order border-1px">
          <!-- 服务中心 -->
          <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-fuwu"></i>
            </span>
            <div class="my_order_div">
              <span>服务中心</span>
              <span class="my_order_icon">
                <i class="iconfont icon-jiantou1"></i>
              </span>
            </div>
          </a>
        </section>

     <section  class="profile_my_order border-1px"  v-if='userInfo._id'>
          <mt-button style="width:100%" type="danger" @click="goLogout">退出登录</mt-button>
        </section>
      </section>
</template>

<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop'
import {mapState} from 'vuex'
import { MessageBox } from 'mint-ui';
export default {
    props: {

    },
    data() {
        return {
          mytitle:'我的'
        };
    },
    computed: {
   ...mapState(['userInfo'])
    },
    created() {

    },
    mounted() {

    },
    methods: {
  goLogout(){
  MessageBox.confirm('确定执行此操作?').then(sure => {
        console.log('确定');
  //发送请求 退出登录 由组件这里用$store.dispatch派发事件，再由actions来接收并进行ajax请求，再在actions里面用commit方法，触发matations里面的方法，，当matations里面的状态发生改变后，就改变了state的值，从而改变了组件的值。从而更新视图。最后获取到我们想要的值。
  this.$store.dispatch('getLogout')
  
},
cancel=>{
  console.log('取消');
  
})
  }
    },
    components: {
HeaderTop
    },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import '../../common/stylus/mixins.styl'
     section
      &.profile //我的
               width 100%
               .profile-number
                 margin-top 45.5px
                 .profile-link
                   clearFix()
                   position relative
                   display block
                   background #02a774
                   padding 20px 10px
                   .profile_image
                     float left
                     width 60px
                     height 60px
                     border-radius 50%
                     overflow hidden
                     vertical-align top
                     .icon-person
                       background #e4e4e4
                       font-size 62px
                   .user-info
                     float left
                     margin-top 8px
                     margin-left 15px
                     p
                       font-weight: 700
                       font-size 18px
                       color #fff
                       &.user-info-top
                         padding-bottom 8px
                       .user-icon
                         display inline-block
                         margin-left -15px
                         margin-right 5px
                         width 20px
                         height 20px
                         .icon-mobile
                           font-size 30px
                           vertical-align text-top
                       .icon-mobile-number
                         font-size 14px
                         color #fff
                   .arrow
                     width 12px
                     height 12px
                     position absolute
                     right 15px
                     top 40%
                     .icon-jiantou1
                       color #fff
                       font-size 5px
               .profile_info_data
                 bottom-border-1px(#e4e4e4)
                 width 100%
                 background #fff
                 overflow hidden
                 .info_data_list
                   clearFix()
                   .info_data_link
                     float left
                     width 33%
                     text-align center
                     border-right 1px solid #f1f1f1
                     .info_data_top
                       display block
                       width 100%
                       font-size 14px
                       color #333
                       padding 15px 5px 10px
                       span
                         display inline-block
                         font-size 30px
                         color #f90
                         font-weight 700
                         line-height 30px
                     .info_data_bottom
                       display inline-block
                       font-size 14px
                       color #666
                       font-weight 400
                       padding-bottom 10px
                   .info_data_link:nth-of-type(2)
                     .info_data_top
                       span
                         color #ff5f3e
                   .info_data_link:nth-of-type(3)
                     border 0
                     .info_data_top
                       span
                         color #6ac20b
               .profile_my_order
                 top-border-1px(#e4e4e4)
                 margin-top 10px
                 background #fff
                 .my_order
                   display flex
                   align-items center
                   padding-left 15px
                   >span
                     display flex
                     align-items center
                     width 20px
                     height 20px
                     >.iconfont
                       margin-left -10px
                       font-size 30px
                     .icon-order-s
                       color #02a774
                     .icon-jifen
                       color #ff5f3e
                     .icon-vip
                       color #f90
                     .icon-fuwu
                       color #02a774
                   .my_order_div
                     width 100%
                     border-bottom 1px solid #f1f1f1
                     padding 18px 10px 18px 0
                     font-size 16px
                     color #333
                     display flex
                     justify-content space-between
                     span
                       display block
                     .my_order_icon
                       width 10px
                       height 10px
                       .icon-jiantou1
                         color #bbb
                         font-size 10px
  
</style>       
